<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Vue 3 Slider Component</title>
		<script src="js/vue.js"></script>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				margin: 0;
				background-color: #f0f0f0;
				font-family: Arial, sans-serif;
			}
			.slider-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;
				background-color: #fff;
				padding: 20px;
				border-radius: 10px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}
			.slider {
				width: 300px;
				margin: 0 auto;
			}
			.slider-value {
				font-size: 24px;
				font-weight: bold;
				color: #333;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="slider-container">
				<label for="slider">滑块</label>
				<input type="range" id="slider" class="slider" v-model="sliderValue" min="0" max="100" step="1" />
				<div class="slider-value">{{ sliderValue }}</div>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						sliderValue: 50
					}
				}
			}).mount("#app");
		</script>
	</body>
</html>
